<template>
	<view>
		<view class="item" v-for="(v, i) in cartList" :key="i">
			<label>
				<checkbox :checked="v.state" @click="changeState(v)" /><text></text>
			</label>
			<image :src="v.image" mode=""></image>
			<view class="right">
				<text>{{ v.title }}</text>
				<view class="">
					<button @click="subCart(v)" :disabled="v.count <= 1">-</button>
					<text>{{ v.count }}</text>
					<button @click="addCart(v)">+</button>
				</view>
				<text>单价 ¥：{{ v.price }}</text>
				<button @click="deleteCart(v)">删除</button>
			</view>
		</view>
		<view class="">
			全选： <label>
				<checkbox :checked="allState" @click="changeAllState(!allState)"/><text></text>
			</label>
			
			总价钱：{{ totalPrice }}
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('cart', ["cartList"]),
			...mapGetters('cart', ['totalPrice', 'allState'])
		},
		methods: {
			...mapMutations('cart', ['addCart', "subCart", "deleteCart", 'changeState', 'changeAllState'])
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;

		image {
			width: 300rpx;
			height: 200rpx;
		}
	}
</style>